<template>
	<view class="warp">
		<view class="date-select-warp">
			<view class="date-list">
				<view
					class="date-item"
					v-for="(item, index) in aWeekDateList"
					:class="{ 'active': currentDate === item.date}"
					:key="index"
					@tap="selectDate(item.date)">
					<text>{{item.abbreviation}}</text>
					<text>{{item.week}}</text>
				</view>
			</view>
			<view class="date-select-more" @tap="getCalendarDate()">
				<image class="date-select-more-date" src="../../static/icon_date.png"/>
			</view>
		</view>
		<calendar v-show="calendarIsShow" :theme-color="'#1889F1'" @callback="getCalendarDate" />
		<view class="ticket-warp">
			<view v-if="ticketList.length === 0" class="ticketListEmpty">
				<text>暂无售票信息~</text>
			</view>
			<scroll-view scroll-y v-else class="ticket-list">
				<TicketItem
					v-for="(ticket, ticketIndex) in ticketList"
					:key="ticketIndex"
					@toTicket="toTicket(ticket)"
					:status="ticket.status === 1"
					:time="ticket.fromTime"
					:estimate="ticket.anticipateTime"
					:fromStation="fromCity"
					:endStation="endCity"
					:stationCount="ticket.sumStation"
					:ticketPrice="ticket.ticketPrice"
					:remainingTicket="ticket.sumSeat"

				/>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { mixins } from '../../common/mixins.js';
import Calendar from '@/components/calendar/index';
import TicketItem from './components/TicketItem.vue';
import api from '../../api';
export default {
	mixins: [mixins],
	components: {
		Calendar,
		TicketItem
	},
	data() {
		return {
			ticketList: [],
			aWeekDateList: [],
			currentDate: '',
			routerId: '',
			calendarIsShow: false,
			fromCity: '',
			endCity: ''
		};
	},
	
	onPullDownRefresh() {
		this.getTicketList();
	},
	
	onLoad(option) {
		const router = JSON.parse(option.router);
		this.routerId = router.id;
		this.fromCity = router.fromCity;
		this.endCity = router.endCity;
		// uni.setNavigationBarTitle({ title: `${router.fromCity} 一 ${router.endCity}` });
		this.generateDateList();
		uni.startPullDownRefresh();
	},
	
	methods: {
		async getTicketList(routeId) {
			const { code, data = [] } = await api.route.getShiftInfo({ routeId: this.routerId, startDate: this.currentDate, endDate: this.currentDate });
			this.ticketList = data;
			uni.stopPullDownRefresh();  //停止下拉刷新动画
		},
		
		selectDate(date) {
			this.currentDate = date;
			this.ticketList = [];
			this.getTicketList();
		},
		
		getCalendarDate() {
			uni.navigateTo({
				url: '../buyTickets/DateChoice'
			});
		},
		
		dateChoiceCallback() {
			uni.startPullDownRefresh();
		},
		
		// 跳转到购票详情
		toTicket(item) {
			if(this.checkToken()) {
				if(item.status == 2) {
					return
				}
				uni.navigateTo({
					url: '../buyTickets/ticket?routerInfo=' + JSON.stringify({...item, ticketDate: this.currentDate})
				});
			}
			else{
				this.toLogin()
			}
		},
		
		dateFormat(date, format) {
			const o = {
			    'M+': date.getMonth() + 1, // month
			    'd+': date.getDate(), // day
			    'h+': date.getHours(), // hour
			    'm+': date.getMinutes(), // minute
			    's+': date.getSeconds(), // second
			    'q+': Math.floor((date.getMonth() + 3) / 3), // quarter
			    'S': date.getMilliseconds() // millisecond
			}
			if (/(y+)/.test(format)) format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
			for (let k in o) {
			    if (new RegExp('(' + k + ')').test(format)) {
			        format = format.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))
			    }
			}
			 return format
		},
		
		generateDateList(count = 0) {
			for (let i = count; i < 6; i++) {
				let date = new Date();
				date.setDate(date.getDate() + i); //获取Count天后的日期
				let m = date.getMonth() + 1; //获取当前月份
				m = m < 10 ? '0' + m : m;
				let d = date.getDate(); //获取当前月份的日期
				d = d < 10 ? '0' + d : d;
				let w = date.getDay(); //获取星期几
				const weekStr = {
					0: '周日',
					1: '周一',
					2: '周二',
					3: '周三',
					4: '周四',
					5: '周五',
					6: '周六',
				}
				let week = weekStr[w];
				if (date.getTime() - new Date().getTime() < 86400000) {
				  week = '今日';
				}
				this.aWeekDateList.push({
					date: this.dateFormat(date, 'yyyy-MM-dd'),
					abbreviation: this.dateFormat(date, 'MM-dd'),
					week,
				});
			}
			this.currentDate = this.aWeekDateList[0].date
		}
	}
};
</script>

<style lang="scss">
	.warp {
		background: linear-gradient(to bottom, #2697FF, #F7F7F7);
		height: 100%;
		display: flex;
		flex-direction: column;
		.date-select-warp {
			display: flex;
			flex-direction: row;
			height: 130upx;
			background: #1889F1;
			.date-list {
				display: flex;
				flex-direction: row;
				flex: 1;
				.date-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-top: 15upx;
					margin-bottom: 15upx;
					color: #FFFFFF;
					font-size: 28rpx;
					font-weight: bold;
					text-align: center;
				}
				.active {
					color: #2697FF;
					background: #FFFFFF;
					border-radius: 16upx;
				}
			}
			.date-select-more {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 90upx;
				height: 100%;
				box-shadow: -5px 0 5px RGBA(20, 128, 227, 0.6);
				.date-select-more-date {
					width: 45upx;
					height: 45upx;
				}
			}
		}
		.ticket-warp {
			display: flex;
			flex-direction: row;
			padding: 20upx;
			justify-content: center;
			background: #F7F7F7;
			margin-top: 20upx;
			height: calc(100% - 188upx);
			border-top-left-radius: 26upx;
			border-top-right-radius: 26upx;
			.ticketListEmpty {
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
			.ticket-list {
				height: 100%;
				width: 100%;
			}
		}
	}
</style>
